<template>
    <div class="dialog-box">
        <el-dialog class="dialog" title="更多操作" v-model="visible" top="80px" draggable :show-close="false"
            :before-close="handleCancel">
            <template #header="{ close, titleId, titleClass }">
                <div class="my-header">
                    <h4 :id="titleId" :class="titleClass">更多操作</h4>
                    <el-button class="close-btn" @click="handleCancel">
                        关闭
                    </el-button>
                </div>
            </template>
            <el-row class="btn-box"> 
                <el-col :span="6" v-has-role="'cashier-gifts'">
                    <el-button class="btn" @click="handleAction('赠送查询')">赠送查询</el-button>
                </el-col>
                <el-col :span="6" v-has-role="'cashier-performance'">
                    <el-button class="btn" @click="handleAction('业绩查询')">业绩查询</el-button>
                </el-col>
                <el-col :span="6" v-has-role="'cashier-payQuery'">
                    <el-button class="btn" @click="handleAction('网上支付查询')">网上支付查询</el-button>
                </el-col>
                <el-col :span="6" v-has-role="'cashier-returnsOrChange'">
                    <el-button class="btn" @click="handleAction('退换菜查询')">退换菜查询</el-button>
                </el-col>
                <el-col :span="6" v-has-role="'cashier-credit'">
                    <el-button class="btn" @click="handleAction('挂账还款')">挂账还款</el-button>
                </el-col>
                <el-col :span="6" v-has-role="'cashier-messageQuery'">
                    <el-button class="btn" @click="handleAction('消息查询')">消息查询</el-button>
                </el-col>
                <el-col :span="6" v-has-role="'cashier-print'">
                    <el-button class="btn" @click="handleAction('打印设置')">打印设置</el-button>
                </el-col>
                <el-col :span="6" v-has-role="'cashier-recycling'">
                    <el-button class="btn" @click="handleAction('空瓶回收')">空瓶回收</el-button>
                </el-col>
                <!-- <el-col :span="6" v-has-role="'cashier-cleanRoom'">
                    <el-button class="btn" @click="handleAction('一键清台')">一键清台</el-button>
                </el-col> -->
                <el-col :span="6" v-has-role="'cashier-handover'">
                    <el-button class="btn color-FF3333" @click="handleAction('交班')">交班/营业额查询</el-button>
                </el-col>
                <el-col :span="6" v-has-role="'cashier-daySettlement'">
                    <el-button class="btn color-FF3333" @click="handleAction('日结')">日结</el-button>
                </el-col>
                <!-- <el-col :span="6" v-if="btnConFRJ">
                    <el-button class="btn" @click="handleAction('反日结')">反日结</el-button>
                </el-col> -->
                <!-- <el-col :span="6">
                    <el-button class="btn" @click="handleAction('出品汇总打印')">出品汇总打印</el-button>
                </el-col> -->
                <el-col :span="6" v-has-role="'cashier-wineSummary'">
                    <el-button class="btn" @click="handleAction('存取酒汇总打印')">存取酒汇总打印</el-button>
                </el-col>
                <el-col :span="6" v-has-role="'cashier-businessSummary'">
                    <el-button class="btn" @click="handleAction('收银汇总查询')">日结查询</el-button>
                </el-col>
                <el-col :span="6" v-has-role="'cashier-product'">
                    <el-button class="btn" @click="handleAction('出品查询')">出品查询 </el-button>
                </el-col>
                <el-col :span="6" v-has-role="'cashier-payDetaiList'">
                    <el-button class="btn" @click="handleAction('支付流水明细')">支付流水明细 </el-button>
                </el-col>
                <el-col :span="6">
                    <el-button class="btn" @click="handleAction('吧台日报查询')">吧台日报查询 </el-button>
                </el-col>
                
            </el-row>
        </el-dialog>
    </div>
    <FinishDayDialog ref="FinishDayRef" v-if="FinishDayVisible" :visible="FinishDayVisible"
        @emitCancel="emitFinishDayCancel" @emitSubmit="emitFinishDaySubmit" />
    <ReFinishDayDialog ref="ReFinishDayRef" v-if="ReFinishDayVisible" :visible="ReFinishDayVisible"
        @emitCancel="emitReFinishDayCancel" @emitSubmit="emitReFinishDaySubmit" />
    <ResetAllDialog ref="ResetAllRef" v-if="ResetAllVisible" :visible="ResetAllVisible" @emitCancel="emitResetAllCancel"
        @emitSubmit="emitResetAllSubmit" />
</template>
  
<script setup>
import FinishDayDialog from '@/views/workbench/cashier/dialog/finishDayDialog.vue'
import ReFinishDayDialog from '@/views/workbench/cashier/dialog/reFinishDayDialog.vue'
import ResetAllDialog from '@/views/workbench/cashier/dialog/resetAllDialog.vue'
import Api from '@/api'
const router = useRouter()
const props = defineProps({
    visible: {
        type: Boolean,
        required: false,
    },
})
const visible = toRef(props, 'visible')

// 按钮点击事件
const handleAction = (btn) => {
    console.log('点击 :>> ', btn);
    switch (btn) {
        case '交班':
            router.push({
                path: '/shiftsDuty'
            })
            emit('emitCancel', 'cancel')
            break
        case '日结':
            handleFinishDay()
            break
        case '反日结':
            handleReFinishDay()
            break
        case '打印设置':
            router.push({
                path: '/cashier/print'
            })
            emit('emitCancel', 'cancel')
            break
        case '一键清台':
            // handleResetAll()
            router.push({
                path: '/cashier/resetAll'
            })
            emit('emitCancel', 'cancel')
            break
        case '空瓶回收':
            router.push({
                path: '/empty'
            })
            emit('emitCancel', 'cancel')
            break
        case '业绩查询':
            router.push({
                path: '/cashier/achievement'
            })
            emit('emitCancel', 'cancel')
            break
        case '挂账还款':
            router.push({
                path: '/cashier/pending'
            })
            emit('emitCancel', 'cancel')
            break
        case '网上支付查询':
            router.push({
                path: '/onorder/pay'
            })
            emit('emitCancel', 'cancel')
            break
        case '消息查询':
            router.push({
                path: '/cashier/message'
            })
            emit('emitCancel', 'cancel')
            break
        case '赠送查询':
            router.push({
                path: '/cashier/send'
            })
            emit('emitCancel', 'cancel')
            break
        case '退换菜查询':
            router.push({
                path: '/cashier/exchange'
            })
            emit('emitCancel', 'cancel')
            break
        case '出品汇总打印':
            router.push({
                path: '/printProduction'
            })
            emit('emitCancel', 'cancel')
            break
        case '存取酒汇总打印':
            router.push({
                path: '/cashier/printWineAll' 
            })
            emit('emitCancel', 'cancel')
            break
        case '收银汇总查询':
            router.push({
                path: '/cashier/cashierSummary' 
            })
            emit('emitCancel', 'cancel')
            break
        case '出品查询':
            router.push({
                path: '/cashier/makeQuery' 
            })
            emit('emitCancel', 'cancel')
            break
        case '支付流水明细':
            router.push({
                path: '/cashier/zfQuery' 
            })
            emit('emitCancel', 'cancel')
            break
        case '吧台日报查询':
            router.push({
                path: '/cashier/barDaily' 
            })
            emit('emitCancel', 'cancel')
            break
            
    }
}
// 取消
const emit = defineEmits(['emitCancel', 'emitSubmit',])
const handleCancel = () => {
    emit('emitCancel', 'cancel')
}
// 确认
const handleSubmit = () => {
    emit('emitSubmit', 'submit')
}

// ------------------------弹窗模块-----------------------
// 日结弹窗
const FinishDayVisible = ref(false)
// const FinishDayRef = ref()
const handleFinishDay = () => {
    FinishDayVisible.value = true
}
// 点击弹窗里的取消按钮
const emitFinishDayCancel = (params) => {
    FinishDayVisible.value = false
}
// 点击弹窗里的确定按钮
const emitFinishDaySubmit = (params) => {
    FinishDayVisible.value = false
}

// -------------- 反日结弹窗-----------------
const ReFinishDayVisible = ref(false)
// const FinishDayRef = ref()
const handleReFinishDay = () => {
    ReFinishDayVisible.value = true
}
// 点击弹窗里的取消按钮
const emitReFinishDayCancel = (params) => {
    ReFinishDayVisible.value = false
}
// 点击弹窗里的确定按钮
const emitReFinishDaySubmit = (params) => {
    ReFinishDayVisible.value = false
}

// -------- 一键清台 ---------
const ResetAllVisible = ref(false)
// const FinishDayRef = ref()
const handleResetAll = () => {
    ResetAllVisible.value = true
}
// 点击弹窗里的取消按钮
const emitResetAllCancel = (params) => {
    ResetAllVisible.value = false
}
// 点击弹窗里的确定按钮
const emitResetAllSubmit = (params) => {
    ResetAllVisible.value = false
}


// -------------------------------------- 权限控制 ----------------------------------------------------
// const btnConJB = ref(true)
// const btnConRJ = ref(true)
// const btnConFRJ = ref(true)
// const getUserMenuButton = () => {
//     Api.Common.PcObjProcess.Do({ "functionName": "GetUserMenuButton", "contentData": { obj:"" }})
//         .then(res => {
//             console.log(res.result);
//             //交班权限
//             btnConJB.value = res.result.some(p => p.name == "handover")
//             //日结权限
//             btnConRJ.value = res.result.some(p => p.name == "daySettlement")
//             //反日结权限
//             btnConFRJ.value = res.result.some(p => p.name == "antiDaySettlement")
//         })
// }
// getUserMenuButton();

</script>
  
<style  lang="scss" scoped>
.dialog-box {
    ::v-deep {
        .el-dialog {

            width: 1000px;
            height: 800px;
            background: #FFFFFF;
            border-radius: 16px;
        }
    }

    .btn-box {
        padding: 50px 50px 0;

        .btn {
            width: 200px;
            height: 80px;
            background: #FFE566;
            border-radius: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 20px;
            color: #212121;
            margin: 0 0 20px 0;
            border: 0;
        }
    }
}

.color-FF3333 {
    color: #FF3333 !important;
}

.my-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 16px;

    .close-btn {
        width: 100px;
        height: 48px;
        background: #CCCCCC;
        border-radius: 8px;
    }
}
::v-deep .el-button:hover{
    color: #ff6a00 !important;
    // color: #fff !important;
    // border: 1px solid #ffe566;
    // background: #ffe566;
}
</style>
  